<template>
  <div class="replyPage">
    <Row>
      <Col span="24" style="padding: 0;">
      <Card dis-hover style="font-size: 12px;">
        <p slot="title" style="color: rgb(102, 102, 102);">
          <Icon type="ios-cart"></Icon>
          <span style="font-size: 12px;margin-left: 2px;">消费列表</span>
        </p>
        <!-- <p slot="extra">
          <Dropdown style="margin-right: 1px; padding-right: 5px;">
            <Button type="dashed" shape="circle" size="small" style="color: rgb(153, 153, 153);">
              <Icon type="ios-arrow-down"></Icon>
              <span style="margin-left: 2px;">套系消费</span>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>新增消费</DropdownItem>
              <DropdownItem>消费升级</DropdownItem>
              <DropdownItem>消费降级</DropdownItem>
              <DropdownItem>套系退单</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Dropdown style="margin-right: 1px; padding-right: 5px;">
            <Button type="dashed" shape="circle" size="small" style="color: rgb(153, 153, 153);">
              <Icon type="ios-arrow-down"></Icon>
              <span style="margin-left: 2px;">加选消费</span>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>新增加选</DropdownItem>
              <DropdownItem>加选升级</DropdownItem>
              <DropdownItem>加选降级</DropdownItem>
              <DropdownItem>加选退单</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <a href="#">
            <Tooltip content="一键退单" placement="top">
              <Button type="dashed" shape="circle" size="small" style="color: rgb(153, 153, 153);">
                <Icon type="ios-undo"></Icon>
              </Button>
            </Tooltip>
          </a>
        </p> -->
        <Row>
          <Col span="24">
            <vxe-table ref="xTable1" class="outTable" max-height="620" show-overflow size="mini" :data="datalist">
              <vxe-column type="expand" title="展开" width="60">
                <template #content="{ row }">
                  <vxe-table v-if="row.id == '1'" ref="xTable2" header-row-class-name="innerHeaderRow" show-overflow
                    size="mini" :data="productList">
                    <vxe-column field="innerzd1" title="产品列表" width="200"></vxe-column>
                    <vxe-column field="innerzd2" title="标签" width="80"></vxe-column>
                    <vxe-column field="innerzd3" title="数量" width="100"></vxe-column>
                    <vxe-column field="innerzd4" title="P数" width="80"></vxe-column>
                    <vxe-column field="innerzd5" title="张数" width="80"></vxe-column>
                  </vxe-table>
                </template>
              </vxe-column>
              <vxe-column field="zd1" title="消费" width="200"></vxe-column>
              <vxe-column field="zd2" title="类型" width="80"></vxe-column>
              <!-- <vxe-column field="zd3" title="分店" width="100"></vxe-column>
              <vxe-column field="zd4" title="接单点" width="80"></vxe-column> -->
              <vxe-column field="zd4" title="门店" width="80"></vxe-column>
              <vxe-column field="zd5" title="业绩人" width="80"></vxe-column>
              <vxe-column field="zd6" title="金额" width="80"></vxe-column>
              <vxe-column field="zd7" title="实收" width="70"></vxe-column>
              <vxe-column field="zd8" title="业绩日期" width="120"></vxe-column>
              <vxe-column field="zd9" title="备注" width="140"></vxe-column>
              <vxe-column field="zd10" title="操作" width="100"></vxe-column>
            </vxe-table>
          </Col>
        </Row>
      </Card>
      </Col>
      <!-- <Col span="24" style="padding-top: 10px;">

      </Col> -->
    </Row>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(["employee_name"]),
    },
    data() {
      return {
        orderRowData: {},
        productList: [],
        albumList: [], // 所有相框
        frameList: [], // 所有相框
        datalist: [{
          id: '1',
          zd1: '套系消费',
          zd2: '套系',
          zd3: '郑州葛罗摄影',
          zd4: '总店',
          zd5: '',
          zd6: '7380.00',
          zd7: '0.00',
          zd8: '2024-01-24',
          zd9: '客资同步 操作员工：心心',
          zd10: '',
        }, {
          id: '2',
          zd1: '新增零散',
          zd2: '零散',
          zd3: '',
          zd4: '',
          zd5: '',
          zd6: '',
          zd7: '',
          zd8: '',
          zd9: '',
          zd10: '',
        }],
        productList: []
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        this.datalist[0]['zd6'] = this.orderRowData.price
        this.datalist[0]['zd7'] = this.orderRowData.amount_paid
        this.datalist[0]['zd8'] = this.orderRowData.creation_time
        this.datalist[0]['zd9'] = this.orderRowData.remarks
      },
      '$store.state.layout.app.albumList'(newValue, oldValue) {
        this.albumList = newValue;
        this.albumList.forEach(item => {
          this.productList.push({
            pro_id: item.album_id,
            innerzd1: item.album_name,
            innerzd2: '',
            innerzd3: '1',
            innerzd4: '0',
            innerzd5: '0',
          })
        })
      },
      '$store.state.layout.app.frameList'(newValue, oldValue) {
        this.frameList = newValue;
        this.frameList.forEach(item => {
          this.productList.push({
            pro_id: item.frame_id,
            innerzd1: item.frame_name,
            innerzd2: '',
            innerzd3: '1',
            innerzd4: '0',
            innerzd5: '0',
          })
        })
      }
    },
    mounted() {
      this.orderRowData = this.$store.state.layout.app.orderRowData

      this.datalist[0]['zd5'] = this.employee_name
      this.datalist[0]['zd6'] = this.orderRowData.price
      this.datalist[0]['zd7'] = this.orderRowData.amount_paid
      this.datalist[0]['zd8'] = this.orderRowData.creation_time
      this.datalist[0]['zd9'] = this.orderRowData.remarks

      this.albumList = this.$store.state.layout.app.albumList;
      this.frameList = this.$store.state.layout.app.frameList;
      this.albumList.forEach(item => {
        this.productList.push({
          pro_id: item.album_id,
          innerzd1: item.album_name,
          innerzd2: '',
          innerzd3: '1',
          innerzd4: '0',
          innerzd5: '0',
        })
      })
      this.frameList.forEach(item => {
        this.productList.push({
          pro_id: item.frame_id,
          innerzd1: item.frame_name,
          innerzd2: '',
          innerzd3: '1',
          innerzd4: '0',
          innerzd5: '0',
        })
      })
    }
  }
</script>

<style scoped lang="less">
  .replyPage {
    height: 50vh;
    overflow: auto;

    .replyBtn {
      display: flex;
      justify-content: right;
      color: rgb(153, 153, 153);
      margin: 6px 0;
    }
  }
</style>
